<template>
  <div class="test-container">
    <el-row>
      <el-button>Default</el-button>
      <el-button type="primary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
      <el-button>中文</el-button>
    </el-row>

    <el-row>
      <el-button plain>Plain</el-button>
      <el-button
          type="primary"
          plain
      >Primary
      </el-button>
      <el-button
          type="success"
          plain
      >Success
      </el-button>
      <el-button
          type="info"
          plain
      >Info
      </el-button>
      <el-button
          type="warning"
          plain
      >Warning
      </el-button>
      <el-button
          type="danger"
          plain
      >Danger
      </el-button>
    </el-row>

    <el-row>
      <el-button round>Round</el-button>
      <el-button
          type="primary"
          round
      >Primary
      </el-button>
      <el-button
          type="success"
          round
      >Success
      </el-button>
      <el-button
          type="info"
          round
      >Info
      </el-button>
      <el-button
          type="warning"
          round
      >Warning
      </el-button>
      <el-button
          type="danger"
          round
      >Danger
      </el-button>
    </el-row>

    <el-form
        ref="form"
        :model="form"
        label-width="120px"
    >
      <el-form-item label="Activity name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="Activity zone">
        <el-select
            v-model="form.region"
            placeholder="please select your zone"
        >
          <el-option
              label="Zone one"
              value="shanghai"
          ></el-option>
          <el-option
              label="Zone two"
              value="beijing"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker
              v-model="form.date1"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col
            class="line"
            :span="2"
        >-
        </el-col>
        <el-col :span="11">
          <el-time-picker
              v-model="form.date2"
              placeholder="Pick a time"
              style="width: 100%"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery">
        <el-switch v-model="form.delivery"></el-switch>
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox
              label="Online activities"
              name="type"
          ></el-checkbox>
          <el-checkbox
              label="Promotion activities"
              name="type"
          ></el-checkbox>
          <el-checkbox
              label="Offline activities"
              name="type"
          ></el-checkbox>
          <el-checkbox
              label="Simple brand exposure"
              name="type"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource">
          <el-radio label="Sponsor"></el-radio>
          <el-radio label="Venue"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input
            v-model="form.desc"
            type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            @click="onSubmit"
        >Create
        </el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
    <el-row class="demo-avatar demo-basic">
      <el-col :span="12">
        <div class="sub-title">circle</div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar :size="50" :src="circleUrl"></el-avatar>
          </div>
          <div v-for="size in sizeList" :key="size" class="block">
            <el-avatar :size="size" :src="circleUrl"></el-avatar>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="sub-title">square</div>
        <div class="demo-basic--circle">
          <div class="block">
            <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
          </div>
          <div v-for="size in sizeList" :key="size" class="block">
            <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-badge :value="200" :max="99" class="item">
      <el-button size="small">comments</el-button>
    </el-badge>
    <el-badge :value="100" :max="10" class="item">
      <el-button size="small">replies</el-button>
    </el-badge>
    <el-calendar/>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>Card name</span>
          <el-button class="button" type="text">Operation button</el-button>
        </div>
      </template>
      <div v-for="o in 4" :key="o" class="text item">{{ "List item " + o }}</div>
    </el-card>
    <div class="demo-collapse">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="Consistency" name="1">
          <div>
            Consistent with real life: in line with the process and logic of real
            life, and comply with languages and habits that the users are used to;
          </div>
          <div>
            Consistent within interface: all elements should be consistent, such
            as: design style, icons and texts, position of elements, etc.
          </div>
        </el-collapse-item>
        <el-collapse-item title="Feedback" name="2">
          <div>
            Operation feedback: enable the users to clearly perceive their
            operations by style updates and interactive effects;
          </div>
          <div>
            Visual feedback: reflect current state by updating or rearranging
            elements of the page.
          </div>
        </el-collapse-item>
        <el-collapse-item title="Efficiency" name="3">
          <div>
            Simplify the process: keep operating process simple and intuitive;
          </div>
          <div>
            Definite and clear: enunciate your intentions clearly so that the
            users can quickly understand and make decisions;
          </div>
          <div>
            Easy to identify: the interface should be straightforward, which helps
            the users to identify and frees them from memorizing and recalling.
          </div>
        </el-collapse-item>
        <el-collapse-item title="Controllability" name="4">
          <div>
            Decision making: giving advices about operations is acceptable, but do
            not make decisions for the users;
          </div>
          <div>
            Controlled consequences: users should be granted the freedom to
            operate, including canceling, aborting or terminating current
            operation.
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-descriptions title="User Info">
      <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
      <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
      <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
      <el-descriptions-item label="Remarks">
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="Address"
      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
        Province
      </el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "eleTest",
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      circleUrl:
          "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl:
          "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
  },
};
</script>

<style scoped lang="less">
.test-container {
  height: 100vh;
}
</style>
